<template>
    <el-main>
        <el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom:20px;"></el-alert>
		<uv-button type="primary" text="确定"></uv-button>
        <div class="dragList" style="width:150px;float:left">
            <draggable v-model="listA" animation="200" item-key="id" :sort="false" :group="{name: 'component',pull: 'clone', put: false}" @end="end" :clone="cloneElement">
                <template #item="{ element }">
                    <div class="item">{{element.name}}</div>
                </template>
            </draggable>
        </div>
        <div class="dragList" style="width:550px;height:700px;float:left;border:1px solid #ccc;padding: 12px;">
            <!-- <draggable v-model="listB" animation="200" item-key="id" group="people"> -->
            <draggable
                    class="list"
                    forceFallback
                    :animation="200"
                    ghostClass="ghost"
                    v-model="questionList"
					item-key="id"
					:component-data="{name:'fade'}"
                    :group="{
                      name: 'component'
                    }">

                   <template #item="{ element }">

					<div class="item2">
						 <el-input v-if="element.type=='search'" :placeholder="element.placeholder"></el-input>
						 <el-carousel height="150px" v-if="element.type=='banner'">
						       <el-carousel-item v-for="item in 4" :key="item">
						          <el-image src="https://assets.mmoexp.com/images/202410/52ea1c088c12cf909d5df8ff217881e5a25ead7b.webp"  fit="cover" style='height:150px'></el-image>
						       </el-carousel-item>
						</el-carousel>
					</div>

                   </template>

            </draggable>


        </div>
    </el-main>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        name: 'drag',
        components: {
            draggable
        },
        data() {
            return {
                questionList:[
					{'name':'test','id':999,'type':'search'},
				],
                listA: [
                    {
                        id: 1,
                        name: '搜索框',
						type:'search'
                    },
                    {
                        id: 2,
                        name: '轮播图',
						type:'banner'
                    }
                ]
            }
        },
        methods:{
            /**
             * 拖拽结束
             * @param e
             */
            end (e) {
              console.log(e)
              // if (e.to.className !== 'group') {
              //       for (const item of this.questionList) {
              //         item.active = false
              //       }
              //       this.questionList[e.newDraggableIndex].active = true
              //       this.$nextTick(() => {
              //         document.getElementById(this.questionList[e.newDraggableIndex].uid).scrollIntoView();
              //       })
              // }
            },
            /**
             * 拖拽clone
             * @param item
             * @returns {any}
             */
            cloneElement(item){
                  console.log(item,"xxxxxxxxxx")
                  const data = JSON.parse(JSON.stringify(item));
                  console.log(data)
                  data.uid = `${data.componentType}-${Math.floor(Math.random() * 1000000)}`
                  data.title = data.componentName
                  data.answer = ''
                  data.active = false
                  data.editTitle = false
                  data.error = false
                  data.errorMessage = ''
                  switch (data.type) {
                    case 'search':
                      data.radius = '10' //圆角
                      data.placeholder = '请输入关键字' // 解析
                      break
                    case 'duoxuan':
                      data.scoreMethod = '1'
                      data.options = [
                        {
                          edit: false,
                          label: '选项1',
                          value: `${data.componentType}-${Math.floor(Math.random() * 1000000)}`
                        },
                        {
                          edit: false,
                          label: '选项2',
                          value: `${data.componentType}-${Math.floor(Math.random() * 1000000)}`
                        }
                      ]
                      data.answer = [data.options[0].value]
                      data.score = 10
                      data.description = ''
                      break
                    case 'panduan':
                      data.scoreMethod = '1'
                      data.options = [
                        {
                          edit: false,
                          label: '是',
                          value: `${data.componentType}-true`
                        },
                        {
                          edit: false,
                          label: '否',
                          value: `${data.componentType}-false`
                        }
                      ]
                      data.answer = data.options[0].value
                      data.score = 10
                      data.description = ''
                      break
                  }
                  return data

            }

        }
    }
</script>

<style scoped>
    .dragList {overflow: auto;}
    .item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
	.item2{
		cursor: move;float: left;width: 100%;
		padding-top: 5px;
		padding-bottom:5px;
		position: relative;
	}
	.item2:hover{
		border:1px solid #409EFF
	}
	.item2::after{
		position: absolute;
		width: 100%;
		height: 100%;
		content:"";
		left:0;
		top:0
	}
    .dragList .sortable-ghost {
        opacity: 0.5;
    }
</style>
